<template>
	<div>
		<el-drawer :title="$t('she-zhi')" direction="ltr" size="30%" v-model="that.settingVisible" @close="close">
			<el-form :model="that.settingForm">
				<el-divider content-position="left">{{ $t('hua-bu') }}</el-divider>
				<el-form-item :label="$t('suo-xiao-bi-li')" label-width="100px">
					<el-slider :min="0.05" :max="0.5" :step="0.05" :format-tooltip="formatterContainerOnceNarrow" v-model="that.settingForm.containerOnceNarrow" @change="setContainerOnceNarrow" />
				</el-form-item>
				<el-form-item :label="$t('fang-da-bi-li')" label-width="100px">
					<el-slider :min="0.05" :max="0.5" :step="0.05" :format-tooltip="formatterContainerOnceEnlarge" v-model="that.settingForm.containerOnceEnlarge" @change="setContainerOnceEnlarge" />
				</el-form-item>

				<el-divider content-position="left">{{ $t('lian-xian') }}</el-divider>
				<el-form-item :label="$t('lei-xing')" label-width="100px">
					<el-select v-model="value" @change="setFlowType">
						<el-option value="Bezier">{{ $t('bei-sai-er-qu-xian') }}</el-option>
						<el-option value="Straight">{{ $t('zhi-xian') }}</el-option>
						<el-option value="Flowchart">{{ $t('liu-cheng-tu-xian') }}</el-option>
						<el-option value="StateMachine">{{ $t('zhuang-tai-xian') }}</el-option>
					</el-select>
				</el-form-item>
				<el-form-item :label="$t('yan-se')" label-width="100px">
					<colorPicker v-model="that.linkColor" @change="setLinkColor" />
				</el-form-item>
				<el-form-item :label="$t('cu-xi')" label-width="100px">
					<el-slider :min="1" :max="10" v-model="that.settingForm.linkThickness" @change="setStrokeWidth" />
				</el-form-item>

				<el-divider content-position="left">{{ $t('mo-ren-yang-shi') }}</el-divider>
				<el-form-item :label="$t('fu-zhu-xian')" label-width="100px">
					<!-- <el-switch
            v-model="that.settingForm.isOpenAuxiliaryLine"
            checkedChildren="开"
            unCheckedChildren="关"
            @change="toggleOpenAuxiliaryLine"
          /> -->
					<el-switch v-model="that.settingForm.isOpenAuxiliaryLine" @change="toggleOpenAuxiliaryLine" />
				</el-form-item>
				<el-form-item :label="$t('zi-dong-dui-qi-shui-ping-jian-ju')" label-width="100px">
					<el-slider :min="10" :max="800" :step="5" v-model="that.settingForm.alignLevelDistance" @change="setAlignLevelDistance" />
				</el-form-item>
				<el-form-item :label="$t('zi-dong-dui-qi-chui-zhi-jian-ju')" label-width="100px">
					<el-slider :min="10" :max="800" :step="5" v-model="that.settingForm.alignVerticalDistance" @change="setAlignVerticalDistance" />
				</el-form-item>
				<el-form-item :label="$t('wei-yi-ju-li')" label-width="100px">
					<el-slider :min="1" v-model="that.settingForm.movePx" @change="setMovePx" />
				</el-form-item>
			</el-form>
		</el-drawer>
	</div>
</template>
  
<script setup>
import {
  ref,
  reactive,
  onMounted,
  onBeforeUnmount,
  defineProps,
  watch,
  defineEmits,
  nextTick,
  defineExpose,
} from "vue";
import $ from 'jquery'
import { flowConfig } from "../config/args-config.js";
const that = reactive({
  settingVisible: false,
  initFlag: false,
  settingForm: {
    movePx: "",
    linkType: "",
    linkThickness: "",
    alignLevelDistance: "",
    alignVerticalDistance: "",
    containerOnceNarrow: "",
    containerOnceEnlarge: "",
  },
  isOpenAuxiliaryLine: flowConfig.defaultStyle.isOpenAuxiliaryLine,
  linkColor: flowConfig.jsPlumbInsConfig.PaintStyle.stroke,
});
const init = () => {
  nextTick(() => {
    that.settingForm = reactive({
      movePx: flowConfig.defaultStyle.movePx, //movePx: 5,
      linkType: flowConfig.jsPlumbInsConfig.Connector[0], //"Flowchart",
      linkThickness: flowConfig.jsPlumbInsConfig.PaintStyle.strokeWidth,
      linkColor: flowConfig.jsPlumbInsConfig.PaintStyle.stroke,
      alignLevelDistance: flowConfig.defaultStyle.alignSpacing.level,
      alignVerticalDistance: flowConfig.defaultStyle.alignSpacing.vertical,
      containerOnceNarrow: flowConfig.defaultStyle.containerScale.onceNarrow,
      containerOnceEnlarge: flowConfig.defaultStyle.containerScale.onceEnlarge,
    });
  });
};

const open = () => {
  that.settingVisible = true;
  if (!that.initFlag) {
    init();
    that.initFlag = true;
  }
};

const close = () => {
  that.settingVisible = false;
};
const setFlowType = (v) => {
  flowConfig.jsPlumbInsConfig.Connector[0] = v;
};
const toggleOpenAuxiliaryLine = (flag) => {
  that.isOpenAuxiliaryLine = flag;
  flowConfig.defaultStyle.isOpenAuxiliaryLine = flag;
};
const setMovePx = (v) => {
  flowConfig.defaultStyle.movePx = v;
};
const setLinkColor = (v) => {
  that.linkColor = v;
  flowConfig.jsPlumbInsConfig.PaintStyle.stroke = v;
};
const setStrokeWidth = (v) => {
  flowConfig.jsPlumbInsConfig.PaintStyle.strokeWidth = v;
};
const setAlignLevelDistance = (v) => {
  flowConfig.defaultStyle.alignSpacing.level = v;
};
const setAlignVerticalDistance = (v) => {
  flowConfig.defaultStyle.alignSpacing.vertical = v;
};
const formatterContainerOnceNarrow = (v) => {
  return `${v * 100}%`;
};
const setContainerOnceNarrow = (v) => {
  flowConfig.defaultStyle.containerScale.onceNarrow = v;
};
const formatterContainerOnceEnlarge = (v) => {
  return `${v * 100}%`;
};
const setContainerOnceEnlarge = (v) => {
  flowConfig.defaultStyle.containerScale.onceEnlarge = v;
};
onMounted(() => {});
defineExpose({
  open,
});
</script>
  
  <style lang="scss">
.m-colorPicker .box {
	z-index: 9999 !important;
	width: 220px !important;
}

.el-divider-horizontal.el-divider-with-text,
.el-divider-horizontal.el-divider-with-text-left,
.el-divider-horizontal.el-divider-with-text-right {
	font-weight: 800;
	margin: 24px 0 4px;
}
</style>